<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-Shadow'>/**
</span> * @class Ext.Shadow
 * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
 * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
 * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
 */
Ext.define('Ext.Shadow', {
    requires: ['Ext.ShadowPool'],

<span id='Ext-Shadow-method-constructor'>    /**
</span>     * Creates new Shadow.
     * @param {Object} config (optional) Config object.
     */
    constructor: function(config) {
        Ext.apply(this, config);
        if (typeof this.mode != &quot;string&quot;) {
            this.mode = this.defaultMode;
        }
        var offset = this.offset,
            adjusts = {
                h: 0
            },
            rad = Math.floor(this.offset / 2);

        switch (this.mode.toLowerCase()) {
            // all this hideous nonsense calculates the various offsets for shadows
            case &quot;drop&quot;:
                if (Ext.supports.CSS3BoxShadow) {
                    adjusts.w = adjusts.h = -offset;
                    adjusts.l = adjusts.t = offset;
                } else {
                    adjusts.w = 0;
                    adjusts.l = adjusts.t = offset;
                    adjusts.t -= 1;
                    if (Ext.isIE) {
                        adjusts.l -= offset + rad;
                        adjusts.t -= offset + rad;
                        adjusts.w -= rad;
                        adjusts.h -= rad;
                        adjusts.t += 1;
                    }
                }
                break;
            case &quot;sides&quot;:
                if (Ext.supports.CSS3BoxShadow) {
                    adjusts.h -= offset;
                    adjusts.t = offset;
                    adjusts.l = adjusts.w = 0;
                } else {
                    adjusts.w = (offset * 2);
                    adjusts.l = -offset;
                    adjusts.t = offset - 1;
                    if (Ext.isIE) {
                        adjusts.l -= (offset - rad);
                        adjusts.t -= offset + rad;
                        adjusts.l += 1;
                        adjusts.w -= (offset - rad) * 2;
                        adjusts.w -= rad + 1;
                        adjusts.h -= 1;
                    }
                }
                break;
            case &quot;frame&quot;:
                if (Ext.supports.CSS3BoxShadow) {
                    adjusts.l = adjusts.w = adjusts.t = 0;
                } else {
                    adjusts.w = adjusts.h = (offset * 2);
                    adjusts.l = adjusts.t = -offset;
                    adjusts.t += 1;
                    adjusts.h -= 2;
                    if (Ext.isIE) {
                        adjusts.l -= (offset - rad);
                        adjusts.t -= (offset - rad);
                        adjusts.l += 1;
                        adjusts.w -= (offset + rad + 1);
                        adjusts.h -= (offset + rad);
                        adjusts.h += 1;
                    }
                    break;
                }
        }
        this.adjusts = adjusts;
    },

<span id='Ext-Shadow-cfg-mode'>    /**
</span>     * @cfg {String} mode
     * The shadow display mode.  Supports the following options:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;&lt;tt&gt;sides&lt;/tt&gt;&lt;/b&gt; : Shadow displays on both sides and bottom only&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;&lt;tt&gt;frame&lt;/tt&gt;&lt;/b&gt; : Shadow displays equally on all four sides&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;&lt;tt&gt;drop&lt;/tt&gt;&lt;/b&gt; : Traditional bottom-right drop shadow&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     */
<span id='Ext-Shadow-cfg-offset'>    /**
</span>     * @cfg {String} offset
     * The number of pixels to offset the shadow from the element (defaults to &lt;tt&gt;4&lt;/tt&gt;)
     */
    offset: 4,

    // private
    defaultMode: &quot;drop&quot;,

<span id='Ext-Shadow-method-show'>    /**
</span>     * Displays the shadow under the target element
     * @param {Mixed} targetEl The id or element under which the shadow should display
     */
    show: function(target) {
        target = Ext.get(target);
        if (!this.el) {
            this.el = Ext.ShadowPool.pull();
            if (this.el.dom.nextSibling != target.dom) {
                this.el.insertBefore(target);
            }
        }
        this.el.setStyle(&quot;z-index&quot;, this.zIndex || parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1);
        if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
            this.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (this.offset) + &quot;)&quot;;
        }
        this.realign(
            target.getLeft(true),
            target.getTop(true),
            target.getWidth(),
            target.getHeight()
        );
        this.el.dom.style.display = &quot;block&quot;;
    },

<span id='Ext-Shadow-method-isVisible'>    /**
</span>     * Returns true if the shadow is visible, else false
     */
    isVisible: function() {
        return this.el ? true: false;
    },

<span id='Ext-Shadow-method-realign'>    /**
</span>     * Direct alignment when values are already available. Show must be called at least once before
     * calling this method to ensure it is initialized.
     * @param {Number} left The target element left position
     * @param {Number} top The target element top position
     * @param {Number} width The target element width
     * @param {Number} height The target element height
     */
    realign: function(l, t, targetWidth, targetHeight) {
        if (!this.el) {
            return;
        }
        var adjusts = this.adjusts,
            d = this.el.dom,
            targetStyle = d.style,
            shadowWidth,
            shadowHeight,
            cn,
            sww, 
            sws, 
            shs;

        targetStyle.left = (l + adjusts.l) + &quot;px&quot;;
        targetStyle.top = (t + adjusts.t) + &quot;px&quot;;
        shadowWidth = Math.max(targetWidth + adjusts.w, 0);
        shadowHeight = Math.max(targetHeight + adjusts.h, 0);
        sws = shadowWidth + &quot;px&quot;;
        shs = shadowHeight + &quot;px&quot;;
        if (targetStyle.width != sws || targetStyle.height != shs) {
            targetStyle.width = sws;
            targetStyle.height = shs;
            if (Ext.supports.CSS3BoxShadow) {
                targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
            } else {

                // Adjust the 9 point framed element to poke out on the required sides
                if (!Ext.isIE) {
                    cn = d.childNodes;
                    sww = Math.max(0, (shadowWidth - 12)) + &quot;px&quot;;
                    cn[0].childNodes[1].style.width = sww;
                    cn[1].childNodes[1].style.width = sww;
                    cn[2].childNodes[1].style.width = sww;
                    cn[1].style.height = Math.max(0, (shadowHeight - 12)) + &quot;px&quot;;
                }
            }
        }
    },

<span id='Ext-Shadow-method-hide'>    /**
</span>     * Hides this shadow
     */
    hide: function() {
        if (this.el) {
            this.el.dom.style.display = &quot;none&quot;;
            Ext.ShadowPool.push(this.el);
            delete this.el;
        }
    },

<span id='Ext-Shadow-method-setZIndex'>    /**
</span>     * Adjust the z-index of this shadow
     * @param {Number} zindex The new z-index
     */
    setZIndex: function(z) {
        this.zIndex = z;
        if (this.el) {
            this.el.setStyle(&quot;z-index&quot;, z);
        }
    }
});</pre>
</body>
</html>
